<template>
	<view>
		<scroll-view :scroll-y="!isListScroll" @scroll="stickyTop" class="contronal">
				<view class="head">
					<uni-icons type="back" size="25" color="#fff" class="icon" @click="navigBack"></uni-icons>
					<text v-if="!isListScroll">歌单</text>
					<text v-else>{{info.describe}}</text>
				</view>
				<view class="_img">
					<view class="_head" v-show="!isListScroll">
						<image :src="info.src"></image>
						<text>{{info.describe}}</text>
					</view>
					<view class="void" v-if="isListScroll"></view>
				</view>
			<view class="list">
					<view class="list_head">
						<image src="../../static/audio-icons/R_playback.png" @click="updateUrls(cache)"></image>
						<text>播放全部</text>
					</view>
				<scroll-view :scroll-y="isListScroll" @scroll="ListScroll"
					style="height: 75vh;background-color: rgba(202, 202, 202, 0); backdrop-filter: blur(0px);">
					<view class="item" v-for="(item,i) in cache" :key="i" @click="addAudio(item)">
						<image :src="item.src" class="item_img"></image>
						<view class="item_detail">
							<text>{{item.name}}</text>
							<text>{{item.singerName}} - {{item.name}}</text>
						</view>
						<image src="../../static/audio-icons/Add_Play.png" class="addplay"></image>
					</view>
				</scroll-view>
			</view>
		</scroll-view>
		<view style="position: fixed;bottom: 0;background-color: rgba(47, 87, 122, 0.8);height:80rpx;width: 750rpx;">
		</view>
		<my-audio></my-audio>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'
	export default {
		computed: {
			...mapState('audio', ['urls'])
		},
		data() {
			return {
				info: {}, //歌单信息
				isListScroll: false, //列表是否可以滚动
				cache: [],
			};
		},
		onLoad(val) {
			this.info = JSON.parse(val.item);
			this.cache = [...this.urls]
		},
		methods: {
			...mapMutations('audio', ['updateUrls', 'addAudio', 'updateUrls']),
			navigBack() {
				uni.switchTab({
					url: '/pages/audio/audio'
				})
			},
			ListScroll(e) {
				if (e.detail.scrollTop == 0) {
					this.isListScroll = false;
				}
			},
			stickyTop(e) {
				this.isListScroll = false;
				let wheight = Math.floor(e.detail.scrollHeight - e.detail.scrollTop)
				let wheights = Math.round(e.detail.scrollHeight - e.detail.scrollTop)
				let systemInfo = uni.getSystemInfoSync();
				let sheight = Math.floor(systemInfo.windowHeight * 0.95);
				let sheights = Math.round(systemInfo.windowHeight * 0.95);
				// alert(wheight+'='+sheight);
				if (wheight === sheight || wheights === sheights) {
					this.isListScroll = true;
				}
			},
		}
	}
</script>

<style lang="scss">
	.contronal {
		height: 95vh;

		.head {
			height: 100rpx;
			position: fixed;
			top: 60rpx;
			left: 0;
			right: 0;
			z-index: 2;
			display: flex;
			line-height: 100rpx;

			.icon {
				margin-top: 20rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				line-height: 60rpx;
				border-radius: 30rpx;

				&:active {
					background-color: rgba(133, 133, 133, 0.5);
					transition: background-color 0.1s;
				}
			}

			text {
				margin-left: 5px;
				color: #fff;
			}
		}

		._img {
			height: 500rpx;
			background-image: url('../../static/bgimg.jpg');
			position: relative;

			._head {
				position: absolute;
				top: 160rpx;
				left: 100rpx;
				display: flex;
				justify-content: space-around;
				width: 500rpx;
				border: 1rpx solid #fff;
				border-radius: 40rpx;
				backdrop-filter: blur(20rpx);
				padding: 20rpx;

				image {
					width: 240rpx;
					height: 240rpx;
					border-radius: 40rpx;
				}

				text {
					margin-top: 60rpx;
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
					padding: 5px;
				}
			}

			.void {
				position: absolute;
				top: 300rpx;
				z-index: 1;
				color: #fff;
				height: 200rpx;
				width: 714rpx;
				background-color: rgba(202, 202, 202, 0);
				// backdrop-filter: blur(v-bind(g_blur));
				backdrop-filter: blur(20rpx);
				transition: backdrop-filter 0.1s;
			}
		}

		.list {
			background-image: url('../../static/bgimg.jpg');
			background-size: cover;
			background-position: center;
			backdrop-filter: blur(20rpx);

			.list_head {
				height: 100rpx;
				display: flex;
				line-height: 100rpx;
				background-color: #92c79a;
				z-index: 3;

				image {
					margin-top: 30rpx;
					margin-left: 20rpx;
					width: 40rpx;
					height: 40rpx;

					&:active {
						transform: scale(1.2);
						transition: transform 0.1s;
					}
				}

				text {
					color: #fff;
					margin-left: 20rpx;
				}
			}

			.item {
				height: 100rpx;
				display: flex;
				line-height: 100rpx;
				padding: 20rpx;
				position: relative;

				&:active {
					background-color: rgba(255, 255, 255, 0.2);
					backdrop-filter: blur(20rpx);
					transition: background-color 0.1s;
				}

				.item_img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}

				.item_detail {
					display: flex;
					flex-direction: column;
					line-height: 70rpx;
					padding: 0 20rpx;

					:nth-of-type(1) {
						height: 60rpx;
						color: #f9f9f9;
						font-size: 30rpx;
						font-weight: bold;
					}

					:nth-of-type(2) {
						line-height: 40rpx;
						color: #81e7d6;
						font-size: 20rpx;
					}
				}

				.addplay {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					right: 60rpx;
					top: 40rpx;
					opacity: 0.8;

					&:active {
						transform: scale(1.1);
						transition: transform 0.1s;
					}
				}
			}
		}

	}
</style>